<template>
    <div class="caiwu-div">
        <mt-header title="财务查询">
            <router-link to="/shop" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
        </mt-header>
        <div class="caiwu">
            <div class="select-date">
                <div class="date">开始日期 <input type="text" readonly placeholder="请选择日期" :value="startdate" @click="showCalendar(1)"></div>
                <div class="date">结束日期 <input type="text" readonly placeholder="请选择日期" :value="enddate" @click="showCalendar(2)"></div>

            </div>
            <p class="p-je">总金额
                <span>￥{{zMoney}}</span>
            </p>

        </div>
        <mt-button class="ok" type="primary" @click="searchCW">查询</mt-button>
        <calendar :show="calendarShow" format="yyyy-MM-dd" @selected="selectedHandler"></calendar>
    </div>
</template>

<script>
import Calendar from 'vue-m-calendar'
import axios from 'axios'
import { Toast } from 'mint-ui'
export default {
    data() {
        return {
            startdate: '',
            enddate: '',
            zMoney: '',
            calendarShow: false,
            status: 1
        }
    },
    methods: {
        searchCW() {
            let token = localStorage.getItem("access_token");
            let start = this.startdate;
            let end = this.enddate;
            if (start != '' && end != '') {
                axios.post(HOST + "/Shop/finance", {
                    "access_token": token,
                    "start_time": start,
                    "end_time": end
                }).then((res) => {
                    res = res.data
                    if (res.result == 'success') {
                        this.zMoney = res.data.fee
                    } else {
                        Toast({
                            message: res.message,
                            position: 'bottom',
                            duration: '2000'
                        })
                    }
                })
            } else {
                Toast({
                    message: '查询时间不能为空',
                    position: 'bottom',
                    duration: 2000
                });
            }

        },
        showCalendar(style) {

            this.status = style;
            this.calendarShow = true;
        },
        selectedHandler(date) {
            this.calendarShow = false;
            if (this.status == 1) {
                this.startdate = date;
            } else {
                this.enddate = date
            }
        },
    },
    components: {
        Calendar
    }
}
</script>

<style lang="stylus">
.caiwu-div
    background:#f2f2f2
    height:100%
    width:100%
    position:absolute
    top:0
    left:0
    z-index:10
    .mint-header
        color:rgb(104, 104, 104)
        background:#26a2ff
        border-bottom:1px solid #ccc
        font-size:18px
        letter-spacing:2px
        box-shadow: 1px 3px 5px #eee
        position: fixed
        top: 0
        left: 0
        width: 100%
        z-index: 10
        color:#fff
        height 44px
        label,span
            color:#fff
    .ok
        height 40px
        width 90%
        margin 30px 5%
    .caiwu
          background: #fff
          margin-top: 44px
          color: #333
          .mint-cell
            border-bottom: 1px solid #f1f1f1
          .select-date
            padding: 10px
            p
              font-size: 15px
              line-height: 35px
              border-bottom: 1px solid #f1f1f1
            .date
              height: 35px
              line-height 35px
              font-size: 14px
              input 
                margin-left 20px
          button
            height: 30px
            width: 80%
            margin-left: 10%
            margin-bottom: 10px
            margin-top:40px
          .p-je
            line-height: 35px
            margin: 0 10px
            border-top: 1px solid #f1f1f1
            padding-bottom 10px
            span
              float: right
              font-size: 18px
              color: #f00
              font-weight: 700
    

</style>